<template>
  <Card size="small" :bordered="false" class="w-4/4 w-full !mt-0 !rounded-lg !p-6px">
    <template #title>
      <div class="flex items-center">
        <div class="cursor-pointer">{{ datalist.name }}</div>
        <ArrowRightOutlined v-if="datalist.canGo" class="ml-10px cursor-pointer" />
      </div>
    </template>
    <template #extra>
      <EditFilled class="cursor-pointer" v-if="datalist.canEdit" @click="editget(datalist.ant)" />
      <div v-if="datalist.ant == 3" class="flex">
        <EllipticTabs :tablist="datalist.tabsant" @change="changeTabs" />
      </div>
    </template>

    <div class="overflow-y-auto overflow-x-hidden h-110px w-1/1" v-if="datalist.ant === 1">
      <List class="">
        <Row :gutter="16">
          <template v-for="item in links" :key="item">
            <Col :span="11">
              <ListItem>
                <Card :hoverable="true" @click="handleGO(item)">
                  <div class="flex items-center">
                    <div class="ml-10px">
                      {{ QUICK_LINKS[item].label }}
                    </div>
                  </div>
                </Card>
              </ListItem>
            </Col>
          </template>
        </Row>
      </List>
    </div>

    <div class="overflow-y-auto overflow-x-hidden h-110px w-1/1" v-if="datalist.ant === 2">
      <List class="">
        <Row :gutter="16">
          <template v-for="item in docLinks" :key="item">
            <Col :span="11">
              <ListItem>
                <Card :hoverable="true" @click="handleOpenUrl(item)">
                  <div class="flex items-center">
                    <div class="ml-10px">
                      {{ item.name }}
                    </div>
                  </div>
                </Card>
              </ListItem>
            </Col>
          </template>
        </Row>
      </List>
    </div>

    <div v-if="datalist.ant == 3" class="h-110px overflow-y-auto overflow-x-hidden">
      <div
        class="flex justify-between p-10px"
        v-show="activeTab === 1"
        v-for="item in Object.keys(usageData.entity)"
        :key="item"
      >
        <div>{{ usageData.entity[item].label }}</div>
        <div class="flex">
          <div>{{ usageData.entity[item].count }}/ ∞</div>
        </div>
      </div>
      <div
        class="flex justify-between p-10px"
        v-show="activeTab === 2"
        v-for="item in Object.keys(usageData.api)"
        :key="item"
      >
        <div>{{ usageData.api[item].label }}</div>
        <div class="flex">
          <div>{{ usageData.api[item].count }}/ ∞</div>
        </div>
      </div>
    </div>

    <div class="overflow-y-auto overflow-x-hidden h-110px w-1/1" v-if="datalist.ant === 4">
      <List class="">
        <Row :gutter="16">
          <template v-for="item in configuration" :key="item">
            <Col :span="11">
              <ListItem>
                <Card :hoverable="true" @click="handleOpenUrl(item)">
                  <div class="flex items-center">
                    <div class="ml-10px">
                      {{ item.label }}
                    </div>
                  </div>
                </Card>
              </ListItem>
            </Col>
          </template>
        </Row>
      </List>
    </div>
    <EditModal @register="register1" @links-change="handleLinksChange" />
  </Card>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import EllipticTabs from './EllipticTabs.vue';
  import EditModal from './EditModal.vue';
  import { useModal } from '/@/components/Modal';
  import { Card, Row, Col, List } from 'ant-design-vue';
  import { ArrowRightOutlined, EditFilled } from '@ant-design/icons-vue';
  import { getUsage } from '/@/api/thingsborad/home/home';
  import { getQuickLinks as getQK } from './props';
  import { useGo } from '/@/hooks/web/usePage';
  import { getQuickLinks, getDocLinks, getFeaturesInfo } from '/@/api/thingsborad/home/home';

  const props = defineProps({
    datalist: {
      type: Object,
      default: () => {},
    },
  });

  const QUICK_LINKS = getQK();
  const links = ref<string[]>([]);
  const docLinks = ref<Recordable[]>([
    {
      name: 'thingsvue文档',
      url: '',
    },
  ]);
  const configuration = ref<Recordable>({
    emailEnabled: { label: '电子邮件', disable: false },
    smsEnabled: { label: '短信', disable: false },
    notificationEnabled: { label: 'Slack', disable: false },
    oauthEnabled: { label: 'OAuth 2', disable: false },
    twoFaEnabled: { label: '两步验证', disable: false },
  });
  const activeTab = ref<number>(1);
  const usageData = ref<Recordable>({
    entity: {
      devices: {
        label: '设备',
        count: 0,
      },
      assets: {
        label: '资产',
        count: 0,
      },
      users: {
        label: '用户',
        count: 0,
      },
      dashboards: {
        label: '仪表盘',
        count: 0,
      },
      customers: {
        label: '客户',
        count: 0,
      },
    },
    api: {
      transportMessages: {
        label: '传输消息',
        count: 0,
      },
      jsExecutions: {
        label: 'JavaScript',
        count: 0,
      },
      alarms: {
        label: '创建告警数',
        count: 0,
      },
      emails: {
        label: '邮件',
        count: 0,
      },
      sms: {
        label: '短信',
        count: 0,
      },
    },
  });
  const parmes = ref();
  const [register1, { openModal: openModal1 }] = useModal();
  const go = useGo();
  const editget = (id: number) => {
    if (id == 1) {
      parmes.value = {
        title: '快速链接',
        links: links,
      };
    } else if (id == 2) {
      parmes.value = {
        title: '文档',
        links: docLinks,
      };
    }
    openModal1(true, parmes.value);
  };

  const changeTabs = (e: any) => {
    activeTab.value = e;
  };

  // 获取快速链接数据
  const getQuickLinksData = async () => {
    const res = await getQuickLinks();
    links.value = res.links;
  };

  // 获取文档链接数据
  const getDocLinksData = async () => {
    const res = await getDocLinks();
    docLinks.value = res.links;
  };

  // 获取配置功能数据
  const getFeaturesInfoData = async () => {
    const res = await getFeaturesInfo();
    Object.keys(res).forEach((item) => {
      configuration.value[item].disable = res[item];
    });
  };

  // 获取使用情况数据
  const getUsageData = async () => {
    const res = await getUsage();
    Object.keys(res).forEach((item) => {
      usageData.value.entity[item] && (usageData.value.entity[item].count = res[item]);
      usageData.value.api[item] && (usageData.value.api[item].count = res[item]);
    });
  };

  // links改变
  const handleLinksChange = (_links: any[]) => {
    links.value = [..._links];
    docLinks.value = [..._links];
  };

  // 路由跳转
  const handleGO = (item: string) => {
    go({ name: item });
  };

  // 打开新页面url
  const handleOpenUrl = (item: Recordable) => {
    console.log(item);
    window.open(item.link);
  };

  watch(
    () => props.datalist,
    (nVal) => {
      if (nVal.ant === 1) {
        getQuickLinksData();
      }
      if (nVal.ant === 2) {
        getDocLinksData();
      }
      if (nVal.ant === 3) {
        getUsageData();
      }
      if (nVal.ant === 4) {
        getFeaturesInfoData();
      }
    },
    {
      immediate: true,
      deep: true,
    },
  );
</script>

<style lang="less" scoped>
  :deep(.ant-card-body) {
    padding: 10px !important;
  }

  :deep(.ant-card-extra) {
    padding: 0px 0px !important;
  }

  :deep(.py-4px) {
    padding: 1px 11px !important;
  }
</style>
